<template>
	<view>
		<!-- #ifndef MP-WEIXIN -->
		<my-navbar leftText="查看物流" @leftClick="leftClick"></my-navbar>
		<!-- #endif -->
		<view id="container"></view>
		<view v-if="time&&distance" class="bottom flex-center">
			司机距离我还有{{distance}}，预计需要{{time}}
		</view>
		<view v-else class="bottom flex-center">暂无数据</view>
	</view>
</template>

<script>
	var map, path = [];
	import {
		$https
	} from '@/static/js/request.js';
	export default {
		data() {
			return {
				time: '',
				distance: '',
			};
		},
		onLoad(options) {
			this.getData(options.id);
		},
		mounted() {
			path = [];
			this.initMap();
		},
		methods: {
			getData(id) {
				$https('GET', 'getLogistics', {
					id
				}, res => {
					if (res.data.errcode == 0) {
						let data = res.data.data;
						this.changeT(data.paths[0].distance, data.paths[0].duration)
						// origin: "115.8646462,28.706147		起点
						// destination: "115.8232700,28.6457170"	终点
						let origin = data.origin.split(','),
							destination = data.destination.split(',');
						// 添加点
						let markerArr = [{
							"id": "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
							"styleId": 'myStyle', //指定样式id
							"position": new TMap.LatLng(origin[1], origin[0]), //点标记坐标位置
							"properties": { //自定义属性
								"title": "marker1"
							}
						}, { //第二个点标记
							"id": "99",
							"styleId": 'myStyle',
							"position": new TMap.LatLng(destination[1], destination[0]),
							"properties": {
								"title": "marker2"
							}
						}];
						var markerLayer = new TMap.MultiMarker({
							map: map, //指定地图容器
							styles: {
								"myStyle": new TMap.MarkerStyle({
									"width": 25, // 点标记样式宽度（像素）
									"height": 35, // 点标记样式高度（像素）
								})
							},
							geometries: markerArr
						});

						let dataArray = data.paths[0].steps;
						dataArray.map(i => {
							let a = i.polyline.split(';');
							a.map(b => {
								let c = b.split(',')
								path.push(new TMap.LatLng(c[1], c[0]))
							})
						})
						var polylineLayer = new TMap.MultiPolyline({
							id: 'polyline-layer', //图层唯一标识
							map: map, //绘制到目标地图
							//折线样式定义
							styles: {
								'style_blue': new TMap.PolylineStyle({
									'color': '#3777FF', //线填充色
									'width': 6, //折线宽度
									'borderWidth': 5, //边线宽度
									'borderColor': '#FFF', //边线颜色
									'lineCap': 'butt' //线端头方式
								})
							},
							//折线数据定义
							geometries: [{
								'id': 'pl_1', //折线唯一标识，删除时使用
								'styleId': 'style_blue', //绑定样式名
								'paths': path
							}, ]
						});


						// 适应点
						var bounds = new TMap.LatLngBounds();
						markerArr.forEach(function(item) {
							if (bounds.isEmpty() || !bounds.contains(item.position)) {
								bounds.extend(item.position);
							}
						})
						map.fitBounds(bounds, {
							padding: 50 // 自适应边距
						});
					}
				})
			},
			changeT(distance, time) {
				this.distance = `${(distance/1000).toFixed(1)}km`;
				this.time = `${parseInt(time/60)}分钟`;
			},
			initMap() {
				var center = new TMap.LatLng(28.678002, 115.847658);
				//初始化地图
				map = new TMap.Map("container", {
					center: center //设置地图中心点坐标
				});
			},
			leftClick() {
				uni.$emit('updateorder', () => {})
				// #ifdef H5
				window.history.back(-1);
				// #endif 
				// #ifndef H5
				uni.navigateBack();
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	#container {
		width: 100%;
		// #ifndef MP-WEIXIN
		height: calc(100vh - 180rpx);
		// #endif
		// #ifdef MP-WEIXIN
		height: calc(100vh - 100rpx);
		// #endif
	}

	.bottom {
		height: 100rpx;
		background: #fff;
		font-size: 34rpx;
	}
</style>
